<script setup lang="ts">
import { ref } from 'vue';
import { getHomeData } from '../../api';
import { RouterLink } from 'vue-router';
let todos = ref<Todo[]>([])
let users = ref<User[]>([])

async function fetchData() {
  try {
    let res = await getHomeData();
    todos.value = res.data.todos
    users.value = res.data.users

  } catch (error) {

  }
}
fetchData()
</script>

<template>
  <!-- <div class="flex flex-col md:flex-row md:[&>dl]:grow"> -->
  <div class="flex flex-col md:flex-row md:gap-x-5">
    <dl class="md:grow">
      <dt class="flex">
        <span class="grow">最新代办</span>
        <span>
          <RouterLink to="/todos">>></RouterLink>
        </span>
      </dt>
      <dd v-for="todo in todos" class="flex border-b gap-x-2">
        <span class="grow">{{ todo.title }}</span>
        <span>{{ todo.completed ? '已完成' : '未完成' }}</span>
      </dd>
    </dl>
    <dl class="md:grow">
      <dt class="flex">
        <span class="grow">最新用户</span>
        <span>
          <RouterLink to="/users">>></RouterLink>
        </span>

      </dt>
      <dd v-for="user in users" class="flex border-b gap-x-2">
        <span class="grow">{{ user.userName }}</span>
        <span><button>编辑</button></span>
      </dd>
    </dl>

  </div>
</template>

<style scoped>
/*table td{
  border: 1px solid black;
}*/
/*tr:nth-child(even) {
  color: #0d6efd;
}*/
</style>